<template>
  <div class="approvalTool">
    <el-table
      ref="approvalTable"
      :data="approvalList"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column type="index" label="序号" width="80px" />
      <el-table-column label="审批类型" width="150px" prop="processName" />
      <el-table-column label="申请人" width="150px" prop="username" />
      <el-table-column label="当前审批人" width="200px" prop="procCurrNodeUserName" />
      <el-table-column label="审批发起时间">
        <template slot-scope="scope">
          <span>{{ scope.row.procApplyTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批状态">
        <template slot-scope="scope">
          <span v-if="scope.row.processState === '1'" class="rovalsState">
            <em class="stay" />
            审批中
          </span>
          <span v-if="scope.row.processState === '2'" class="rovalsState">
            <em class="pass" />
            审批通过
          </span>
          <span v-if="scope.row.processState === '3'" class="rovalsState">
            <em class="nopass" />
            审批不通过
          </span>
          <span v-if="scope.row.processState === '4'" class="rovalsState">
            <em class="remove" />
            撤销
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260px">
        <template slot-scope="{row}">
          <el-button v-if="row.processState === '1'" type="primary" size="mini" @click="pass('2',row.processId)">通过</el-button>
          <el-button v-if="row.processState === '1'" type="primary" size="mini" @click="reject('3',row.processId)">驳回</el-button>
          <el-button type="primary" size="mini" @click="view(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        :total="pagination.total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="sizes,prev,pager,next,jumper"
        @current-change="currenChange"
        @size-change="sizeChange"
      />
    </div>

    <!-- 通过审核弹框 -->
    <el-dialog
      title="通过审核"
      :visible.sync="passDialog"
      width="30%"
    >
      <el-input
        v-model="formData.handleOpinion"
        type="textarea"
        :rows="2"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="passCancel">取 消</el-button>
        <el-button type="primary" @click="passOK">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 驳回审核弹框 -->
    <el-dialog
      title="驳回审核"
      :visible.sync="rejectDialog"
      width="30%"
    >
      <el-input
        v-model="formData.handleOpinion"
        type="textarea"
        :rows="2"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectCancel">取 消</el-button>
        <el-button type="primary" @click="rejectOk">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看弹框 -->
    <el-dialog
      :title="viewName"
      :visible.sync="viewDialog"
      width="50%"
    >
      <div class="quitApproval">
        <div class="contTop" style="width:100%">
          <div class="maincontent">
            <img src="@/assets/common/img.jpeg" alt="">
            <div>
              <p><strong>{{ viewList.username }}</strong></p>
              <p><strong>部门：</strong> {{ viewList.departmentName }} </p>
              <p><strong>入职时间：</strong> {{ viewList.timeOfEntry | formatDate }} </p>
            </div>
          </div>
          <hr>
          <div class="content">
            <!-- 请假 -->
            <p v-if="viewName==='请假'" class="type"><span>请假类型： </span> <el-input v-model="viewList.data.processName" disabled /> </p>
            <p v-if="viewName==='请假'" class="type"><span>开始时间： </span> <el-input v-model="viewList.data.startTime" disabled />  </p>
            <p v-if="viewName==='请假'" class="type"><span>结束时间： </span> <el-input v-model="viewList.data.endTime" disabled /> </p>
            <p v-if="viewName==='请假'" class="type"><span>请假时长： </span> <el-input v-model="viewList.data.duration" disabled /> </p>
            <p v-if="viewName==='请假'" class="type"><span>申请原因： </span> <el-input v-model="viewList.data.reason" disabled /> </p>
            <!-- 离职 -->
            <p v-if="viewName==='离职'" class="type"><span>期望离职时间： </span> <el-input v-model="viewList.data.end_time" disabled /> </p>
            <p v-if="viewName==='离职'" class="type"><span>离职原因： </span> <el-input v-model="viewList.data.reason" disabled /> </p>
            <!-- 加班 -->
            <p v-if="viewName==='加班'" class="type"><span>补偿方式： </span> 调休 </p>
            <p v-if="viewName==='加班'" class="type"><span>加班开始时间： </span> <el-input v-model="viewList.data.start_time" disabled /> </p>
            <p v-if="viewName==='加班'" class="type"><span>加班结束时间： </span> <el-input v-model="viewList.data.end_time" disabled /> </p>
            <p v-if="viewName==='加班'" class="type"><span>申请原因： </span> <el-input v-model="viewList.data.reason" disabled /> </p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getApprovalList, getApprovalDetail, commitApproval } from '@/api/approvals'
export default {
  data() {
    return {
      approvalList: [],
      userId: this.$store.state.user.userInfo.userId,
      pagination: {
        page: 1, // 页面
        pageSize: 10, // 每页条数
        total: 1 // 总条数
      },
      passDialog: false,
      textarea: '',
      rejectDialog: false,
      textarea2: '',
      viewName: '',
      viewDialog: false,
      viewList: {
        data: {}
      },
      records: [],
      formData: {
        handleOpinion: '',
        processId: '',
        handleType: ''
      },
      props: {
        needPage: {
          type: Object
        }
      }
    }
  },
  mounted() {
    this.getApprovalList()
    console.log(this.TypeApproval)
  },
  methods: {
    // 每页条数
    sizeChange(currentPages) {
      console.log(currentPages)
      this.pagination.pageSize = currentPages
      this.getApprovalList()
    },
    // 通过审核弹框
    pass(num, id) {
      this.passDialog = true
      this.formData.processId = id
      if (num === '2') {
        this.formData.handleType = '2'
      }
      this.formData.handleUserId = this.userId
    },
    // 通过审核弹框确定
    async passOK() {
      // 发请求
      await commitApproval(this.formData)
      // 提示用户
      this.$message.success('操作成功')
      // 将弹框内容清空
      this.textarea = ''
      // 重新渲染页面
      this.getApprovalList()
      // 关闭弹框
      this.passDialog = false
    },
    // 通过审核弹框取消
    passCancel() {
      // 清空内容
      this.textarea = ''
      // 关闭弹框
      this.passDialog = false
    },
    // 驳回审核弹框
    reject(num, id) {
      this.rejectDialog = true
      this.formData.processId = id
      if (num === '3') {
        this.formData.handleType = '3'
      }
      this.formData.handleUserId = this.userId
    },
    rejectCancel() {
      // 清空数据
      this.textarea2 = ''
      // 关闭弹框
      this.rejectDialog = false
    },
    // 驳回审核确定
    async rejectOk() {
      console.log(123)
      // 发请求
      await commitApproval(this.formData)
      // 提示用户
      this.$message.success('操作成功')
      // 清空内容
      this.textarea2 = ''
      // 渲染页面
      this.getApprovalList()
      // 关闭弹框
      this.rejectDialog = false
    },
    // 查询审批的详情数据
    async getApprovalList() {
      const res = await getApprovalList(this.pagination)
      console.log(res.rows)
      // 子传父
      this.$emit('processData', res.rows)
      // this.pagination.total = res.total
      this.approvalList = res.rows
      console.log(this.approvalList)
      this.pagination.total = res.total
      this.processId = this.$route.params.id
      console.log(this.processId)
      // this.approvalList.filter(item => {
      //   item.pricessName === this.TypeApproval
      //   return this.approvalList
      // })
      // console.log(this.approvalList)
      // if (this.TypeApproval) {
      //   rows this.
      //   this.approvalList
      // }
    },
    // 查看弹框
    async view(obj) {
      // 显示弹框
      this.viewDialog = true
      console.log(obj)
      const name = obj.processName
      const processId = obj.processId
      this.viewName = name
      console.log(name)
      console.log(processId)
      // 发请求
      this.viewList = await getApprovalDetail(processId)
      console.log(this.viewList)
      this.viewList.data = JSON.parse(this.viewList.procData)
      console.log(this.viewList.data)
    },
    // 修改页面
    currenChange(currentpage) {
      console.log(123)
      this.pagination.page = currentpage
      // this.
      this.getApprovalList()
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
.rovalsState {
  display: flex;
  align-items: center;
  .stay,
  .pass,
  .nopass,
  .remove {
    display: block;
    width: 5px;
    height:5px;
    border-radius: 50%;
    background-color: #3e90ec;
    margin-right: 5px;
  }
  .pass {
    background-color: #41a94f;
  }
  .nopass {
    background-color: #e1362f;
  }
  .remove {
    background-color: #bfbfbf;
  }
}
.quitApproval {
  .contTop {
    .maincontent {
      display: flex;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid #ccc;
        margin-right: 20px;
      }
    }
    .content {
      .type {
        display: flex;
        align-items: center;
        span {
          display: block;
          width: 120px;
        }
      }
    }
  }
}
</style>
